---
title: "Progress Circle"
description: A modern circular progress indicator designed for visually representing task completion, downloads, or loading animations.
order: 3
published: true
references: ["https://react-spectrum.adobe.com/react-aria/ProgressBar.html#props"]
---

## Basic

Progress bars show how much an operation is done, either exactly or roughly, over time.
<How toUse="statuses/progress-circle/progress-circle-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/progress-circle
```

## Manual installation
```bash
npm i react-aria-components
```
<SourceCode toShow='progress-circle'/>

## Anatomy
```
import { ProgressCircle } from "@/components/ui/progress-circle"

<ProgressCircle aria-label="Loading…" value={25} />
```

## Indeterminate
You can also make the progress circle indeterminate by setting the `isIndeterminate` prop.
<How toUse="statuses/progress-circle/progress-circle-indeterminate-demo" />

## Custom Size
You can customize the size of the progress circle by using className with tailwind classes or style props.
<How toUse="statuses/progress-circle/progress-circle-custom-size-demo" />

## Controlled
You can control the progress circle by using the `value` prop.
<How toUse="statuses/progress-circle/progress-circle-controlled-demo" />

## Combine with button
The button includes an isPending prop to indicate a pending state, allowing for seamless integration with the progress circle.
<How toUse="buttons/button/button-pending-demo" />

## Custom color
The progress circle can be customized with the `color` prop.
<How toUse="statuses/progress-circle/progress-circle-color-demo" />
